<style scoped>
  .list_wrap_4 {
    overflow: hidden;
    clear: both;
    margin-top: 5px;
  }

  .contact_img_1 img {
    width: 100%;
    height: auto;
  }

  .list_box_4 {
    display: block;
    overflow: hidden;
  }

  .list_box_4 .list_cell_6 {
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;
    background-size: 100% 1px;
    font-size: 14px;
    line-height: 33px;
  }

  .list_box_4 .list_cell_6 p {
    height: 36px;
    overflow: hidden;
    color: #333
  }

  .list_box_4 .list_cell_6 span {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    color: #333
  }

  .weui-col-40 {
    width: 70%;
    float: left;
  }

  .list_img_1 {
    display: block;
    float: left;
    width: 120px;
    height: 120px;
    overflow: hidden;
    margin-right: 5px;
  }

  .list_img_1 img {
    width: 100%;
    height: auto;
  }

  .btn_boxs_5 {
    overflow: hidden;
    width: 100%;
    text-align: center;
    background: url(../assets/img/point_bg_1.png) repeat;
    line-height: 18px;
    vertical-align: middle;
    color: #5f6364;
    border-bottom: 1px solid #e0e0e0;
  }

  .btn_boxs_5 p {
    display: block;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .btn_boxs_5 .btn_style_7 {
    float: right;
    width: 100%;
    font-size: 16px;
  }

  .btn_boxs_5 .btn_style_7 a, .btn_boxs_5 .btn_style_7 a:visited {
    display: block;
    width: 40%;
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #dd2727;
    color: #fff;
    float: left;
    margin-left: 10%;
  }

  .btn_boxs_5 .btn_style_7 a:hover {
    display: block;
    background-color: #dd2727;
    color: #fff;
  }

  .btn_boxs_5 .btn_style_8 {
    float: right;
    width: 100%;
    font-size: 16px;
  }

  .btn_boxs_5 .btn_style_8 a, .btn_boxs_5 .btn_style_8 a:visited {
    display: block;
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #f7b137;
    color: #fff;
  }

  .btn_boxs_5 .btn_style_8 a:hover {
    display: block;
    background-color: #f29900;
    color: #fff;
  }

  .weui-col-30 {
    width: 30%;
    float: left;
  }

  .content_txt_1 strong {
    display: block;
    overflow: hidden;
    font-size: 22px;
    line-height: 22px;
    color: #dd2727;
    margin-top: 5px;
  }

  .content_txt_1 {
    margin-top: 0px;
    clear: both;
    overflow: hidden;
    padding: 15px;
    background-color: #fff;
    line-height: 18px;
    color: #5f6364;
    border-bottom: 1px solid #e0e0e0;
  }

  .box {
    margin-top: 5px;
    background-color: #fff;
  }
</style>
<template>
  <div>
    <x-header style="background-color:#f7fcf6;border-bottom: 1px solid #e2e2e2;"
              :left-options="{backText:'',showBack: true}">订单列表
    </x-header>
    <tab>
      <tab-item @on-item-click="show1">未支付</tab-item>
      <tab-item @on-item-click="show2">已支付</tab-item>
      <tab-item @on-item-click="show3">已完成</tab-item>
    </tab>
    <div class="list_wrap_4" v-show="show_1">
      <div v-for="(item, index) in nopay" class="box">
        <div class="content_txt_1">
          <div class="list_box_4">
            <router-link :to="{ path: 'goods?id='+item.goods.id}">
              <div class="list_img_1"><img :src="item.goods.logo"></div>
            </router-link>
            <div class="list_cell_6" @click="payit(item)">
              <p>{{item.goods.name}}</p>
              <strong>￥{{item.orderAmount}}</strong>
              <p>订单 号：{{item.orderCode}}</p>
              <p>{{item.createTime}}</p>
            </div>
          </div>
        </div>
        <div class="weui-row weui-no-gutter btn_boxs_5">
          <div class="weui-col-30"><p>共{{item.goodsCount}}件商品</p></div>
          <div class="weui-col-40">
            <div class="btn_style_7"><a @click="payit(item)" style=" background:green">去兑换</a><a
              @click="delet(item.id)">取消订单</a></div>
          </div>
        </div>
      </div>
    </div>


    <div class="list_wrap_4" v-show="show_2">
      <div v-for="(item, index) in paid" class="box">
        <div class="content_txt_1">
          <div class="list_box_4">
            <router-link :to="{ path: 'goods?id='+item.goods.id}">
              <div class="list_img_1"><img :src="item.goods.logo"></div>
            </router-link>
            <div class="list_cell_6" @click="payit(item)">
              <p>{{item.goods.name}}</p>
              <strong>￥{{item.orderAmount}}</strong>
              <p>订单 号：{{item.orderCode}}</p>
              <p>{{item.createTime}}</p>
            </div>
          </div>

        </div>
        <div class="weui-row weui-no-gutter btn_boxs_5">
          <div class="weui-col-30"><p>共{{item.goodsCount}}件商品</p></div>
          <div class="weui-col-40" style="width:60%;">
            <div class="btn_style_7">
              <p style="text-align:right;" @click="payit(item)">查看</p>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list_wrap_4" v-show="show_3">
      <div v-for="(item, index) in finish" class="box">
        <div class="content_txt_1">
          <div class="list_box_4">
            <router-link :to="{ path: 'goods?id='+item.goods.id}">
              <div class="list_img_1"><img :src="item.goods.logo"></div>
            </router-link>
            <div class="list_cell_6" @click="payit(item)">
              <p>{{item.goods.name}}</p>
              <strong>￥{{item.orderAmount}}</strong>
              <p>订单 号：{{item.orderCode}}</p>
              <p>{{item.createTime}}</p>
            </div>
          </div>

        </div>
        <div class="weui-row weui-no-gutter btn_boxs_5">
          <div class="weui-col-30"><p>共{{item.goodsCount}}件商品</p></div>
          <div class="weui-col-40" style="width:60%;">
            <p style="text-align:right;">已完成</p>
          </div>
        </div>
      </div>
    </div>
    <toast v-model="success">{{message}}</toast>
    <toast v-model="error" type="warn">{{errorMessage}}</toast>
  </div>
</template>
<script>
  import {XHeader, Tab, TabItem, Toast, Confirm} from 'vux'
  import common from '../services/common';
  export default {
    data() {
      return {
        message: "成功",
        errorMessage: "失败",
        success: false,
        error: false,
        sum1: [],
        sum2: [],
        sum3: [],
        show_1: true,
        show_2: false,
        show_3: false,
        value: "",
        orders: [],
        nopay: [],
        paid: [],
        finish: [],
        commonList: [''],
        form: {
          page: "1",
          size: "999",
        },
        form2: {
          orderId: "",
        },
        paymess: {
          "orderNo": "",
          "goodsName": "",
          "totalPrice": "",
          "receiptName": "",
        }
      }
    },
    components: {
      XHeader,
      Tab,
      TabItem,
      Toast,
      Confirm
    },
    computed: {},
    mounted: function () {
      document.title = "我的订单";

      if (common.checkLogin()) {
       } else {
       common.setStorage('auth_success_redirect_to', location.href);
       location.replace('http://yirenyiti.gaozhikeji.com/daiyan/wx/entrance?type=' + encodeURIComponent('auth.html?type=0'));
       }


      common.post(common.getRequestData("myGoodsOrder", this.form), (res) => {
        if (res.data.responseCode == '0000') {
          this.orders = res.data.data;
          for (let i = 0; i < this.orders.length; i++) {
            if (this.orders[i].status == "0") {
              this.nopay.push(this.orders[i])
            } else if (this.orders[i].status == "1") {
              this.paid.push(this.orders[i])
            } else {
              this.finish.push(this.orders[i])
            }
          }
        } else {
          this.error = true;
          this.errorMessage = res.data.responseMsg;
        }
      }, false);
    },
    methods: {
      show1(){
        this.show_1 = true;
        this.show_2 = false;
        this.show_3 = false
      },
      show2(){
        this.show_1 = false;
        this.show_2 = true;
        this.show_3 = false
      },
      show3(){
        this.show_1 = false;
        this.show_2 = false;
        this.show_3 = true
      },
      delet(id){
        this.form2.orderId = id;
        const form = this.form2;
        this.$vux.confirm.show({
          title: '操作提示',
          content: '确认取消订单吗？',
          onConfirm () {
            common.post(common.getRequestData("goodsOrderDel", form), (res) => {
              if (res.data.responseCode == '0000') {
                location.reload()
              } else {
                this.error = true;
                this.errorMessage = res.data.responseMsg;
              }
            }, false);
          }
        })
      },
      payit(item){
        common.setStorage("goodsOrder", JSON.stringify(item));
        this.$router.push('/pay')
      }
    }
  }
</script>
